<template>
    <div>
        <van-nav-bar
  title="购物车"
  left-text="返回"
  left-arrow
  @click-left="()=>{
    $router.back('/')
  }"
/>
 <van-skeleton :row="7" :loading="!ispd"/>
<div v-if="ispd">
<van-empty
v-if="!userdata"
  image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
  image-size="80"
  description="描述文字"
/>
<div v-else>
<van-swipe-cell v-for="key in userdata">
  <van-card
    :price="key.goods.goods_price"
    :title="key.goods.goods_name"
    class="goods-card"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  >
 <template #thumb>
    <van-checkbox v-model="key.checked"></van-checkbox>
   <van-image
  width="100"
  height="100"
  :src="key.goods.goods_big_logo?key.goods.goods_big_logo:'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
/>
  </template>
  <template #num>
   <van-stepper v-model="key.number" theme="round" button-size="22" disable-input />
  </template>
</van-card>
  <template #right>
    <van-button square style="height: 100%;" text="删除" type="danger" class="delete-button" @click="delcart(key.id)"/>
  </template>
</van-swipe-cell>
</div>
<van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="allchecked">全选</van-checkbox>
  <template #tip>
    你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
  </template>
</van-submit-bar>
</div>
    </div>
</template>

<script setup>
import { ref,computed } from "vue";
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
console.log(store.carts);
let userdata=ref([])
let cartadd=()=>{
let username=localStorage.getItem('username')
userdata.value=store.carts.filter(i=>i.username==username)
}
cartadd()
const delcart=(id)=>{
    store.delcart(id)
    cartadd()
}
const allprice=computed(()=>{
    let allprice=0
    let cart=userdata.value.filter(i=>i.checked)
    cart.forEach((i)=>{
        allprice+=i.number*i.goods.goods_price
    })
    return allprice*100
})
const allchecked=computed({
    get(){
        if(userdata.value.length==0){
            return false
        }
        else{
            return userdata.value.every(i=>i.checked)
        }
    },
    set(val){
        userdata.value.forEach(i=>i.checked=val)

    }
})
import { useRouter } from "vue-router";
import { showToast } from 'vant';
const router=new useRouter()
import { createApi } from "@/api/api";
const onSubmit=()=>{
    let cart=userdata.value.filter(i=>i.checked)  
    if(cart.length==0){
        showToast({
            type:"fail",
            message:'请选择',
            duration:1500,
         });
    }
    else{
        console.log(cart);
       createApi({
        goodsIds:cart.map(i=>i.goods.goods_id).join(','),
        username:localStorage.getItem('username'),
        product_code:cart[0].goods.goods_name+'等',
        totalPrice:allprice.value,
        nums:cart.map(i=>i.number).join(','),
       }).then(res=>{
        console.log('order',res);
        router.push('/order/'+res.data.data.orderId)
       }) 
    }
}
let ispd=ref(false)
    setTimeout(()=>{
        ispd.value=true
    },1500)
</script>

<style lang="scss" scoped>

</style>